<template>
  <div class="apply-container">
    <div class="apply-header">
      <img class="apply-header__logo" src="~@/assets/image/logo_100.png">
    
      <div class="apply-header__user">
        <el-dropdown>
          <div class="user-info">
            <span >你好：</span>
            <el-badge :value="reviewStr" class="item">
              <span>{{info.name}}</span>
            </el-badge>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logOff" icon="el-icon-switch-button">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="apply-content">
      <div class="apply-content__cards" v-if="step===1">
        <el-card class="apply-content__cards__item">
            <div class="title">个人入驻</div>
            <div class="desc">适合个人/个体工商户入驻，提供身份证即可入驻</div>
            <cs-icon-svg name="user"></cs-icon-svg>
            <div>
              <el-button size="medium" class="btn-apply" @click="handleApply(1)">立即入驻</el-button>
            </div>
        </el-card>
        <el-card class="apply-content__cards__item">
          <div class="title">企业入驻</div>
          <div class="desc">适合企业/企业入驻，提供营业执照等信息即可入驻</div>
          <cs-icon-svg name="company"></cs-icon-svg>
          <div>
            <el-button size="medium" class="btn-apply" @click="handleApply(2)">立即入驻</el-button>
          </div>
        </el-card>
      </div>
      <div class="apply-info" v-else-if="step===2 && type==1">
        <el-col :span="12" :offset="6">
          <el-form class="form"  ref="form" :model="form" :rules="formRules" label-position="left" label-width="180px">
            <div class="form-title">基本信息</div>
            <div class="form-panel">
              <el-form-item label="入驻人姓名" prop="contact_name">
                <el-input v-model="form.contact_name"></el-input>
              </el-form-item>
              <el-form-item label="入驻人邮箱"  prop="contact_email">
                <el-input v-model="form.contact_email"></el-input>
              </el-form-item>
              <el-form-item label="入驻人手机号码" prop="contact_mobile">
                <el-input v-model="form.contact_mobile"></el-input>
              </el-form-item>
              <el-form-item label="入驻人身份证号码" prop="id_card_number">
                <el-input v-model="form.id_card_number"></el-input>
              </el-form-item>
              <el-form-item label="身份证人面像" prop="id_card_face">
                <uploadThumb
                    :aspectRatio="16/9"
                    @upload-success="cropFaceSuccess"
                    :defaultImage = "form.id_card_face"
                ></uploadThumb>
              </el-form-item>
              <el-form-item label="身份证人像面" prop="id_card_emblem">
                <uploadThumb
                    :aspectRatio="16/9"
                    :defaultImage = "form.id_card_emblem"
                    @upload-success="cropEmblemSuccess"
                ></uploadThumb>
              </el-form-item>
              <el-form-item label="手持身份证半身照片" prop="id_card_handheld">
                <uploadThumb
                    :aspectRatio="9/16"
                    :defaultImage = "form.id_card_handheld"
                    @upload-success="cropHandheldSuccess"
                ></uploadThumb>
              </el-form-item>
            </div>
            <div class="form-title">店铺信息</div>
            <div class="form-panel">
              <el-form-item label="店铺名称" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="店铺简称" prop="short_name" >
                <el-input v-model="form.short_name"></el-input>
              </el-form-item>
              <el-form-item label="店铺描述" prop="description">
                <el-input type="textarea" :rows="4" v-model="form.description"></el-input>
              </el-form-item>
            </div>
            <div class="action" v-if="review ===1 || review === -1">
              <el-button class="btn-step"  @click="handlePrevious">上一步</el-button>
              <el-button class="btn-step" :disabled="btnDisabled"  type="primary" @click="handleSubmit">确定</el-button>
            </div>
          </el-form>
        </el-col>
       
      </div>
      <div class="apply-info" v-else-if="step===2 && type==2">
        <el-col :span="12" :offset="6">
          <el-form class="form"  ref="form" :model="form" :rules="formRules" label-position="left" label-width="180px">
            <div class="form-title">入驻企业信息</div>
            <div class="form-panel">
              <el-form-item label="企业营业执照" prop="business_license">
                <uploadThumb
                    :aspectRatio="9/16"
                    @upload-success="cropLicenseSuccess"
                    :defaultImage="form.business_license"
                ></uploadThumb>
              </el-form-item>
              <el-form-item label="统计机构信用代码" prop="credit_code">
                <el-input v-model="form.credit_code"></el-input>
              </el-form-item>
              <el-form-item label="企业名称" prop="company_name">
                <el-input v-model="form.company_name"></el-input>
              </el-form-item>
              <el-form-item label="经营期限" prop="license_start">
                <el-date-picker
                  v-model="expired"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format ="yyyy-MM-dd"
                  @change = "handleDataChange"
                  >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="所在地区" prop = "business_province">
                <cs-region-select v-model="region"/>
              </el-form-item>
              <el-form-item label="详细地址" prop="business_address">
                <el-input v-model="form.business_address"></el-input>
              </el-form-item>
              <el-form-item label="法人姓名" prop="person_name">
                <el-input v-model="form.person_name"></el-input>
              </el-form-item>
              <el-form-item label="法人手机号码" prop="contact_mobile">
                <el-input v-model="form.contact_mobile"></el-input>
              </el-form-item>
              <el-form-item label="法人身份证号码" prop="id_card_number">
                <el-input v-model="form.id_card_number"></el-input>
              </el-form-item>
              
              <el-form-item label="身份证人面像" prop="id_card_face">
                <uploadThumb
                    :aspectRatio="16/9"
                    @upload-success="cropFaceSuccess"
                    :defaultImage = "form.id_card_face"
                ></uploadThumb>
              </el-form-item>
              <el-form-item label="身份证国徽面" prop="id_card_emblem">
                <uploadThumb
                    :aspectRatio="16/9"
                    @upload-success="cropEmblemSuccess"
                    :defaultImage="form.id_card_emblem"
                ></uploadThumb>
              </el-form-item>
              <el-form-item label="手持身份证半身照片" prop="id_card_handheld">
                <uploadThumb
                    :aspectRatio="9/16"
                    @upload-success="cropHandheldSuccess"
                    :defaultImage="form.id_card_handheld"
                ></uploadThumb>
              </el-form-item>
            </div>
            <div class="form-title">店铺信息</div>
            <div class="form-panel">
              <el-form-item label="店铺名称" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="店铺简称" prop="short_name">
                <el-input v-model="form.short_name"></el-input>
              </el-form-item>
              <el-form-item label="店铺描述" prop="description">
                <el-input type="textarea" :rows="4" v-model="form.description"></el-input>
              </el-form-item>
            </div>
            <div class="action" v-if="review ===1 || review === -1">
              <el-button class="btn-step"  @click="handlePrevious">上一步</el-button>
              <el-button class="btn-step" :disabled="btnDisabled" type="primary" @click="handleSubmit">确定</el-button>
            </div>
          </el-form>
        </el-col>  
      </div>
      <br style='clear:both'/>
    </div>
   
    <div class="dialog" v-if="msgShow">
      <div class="dialog-logo">
        <i class="i-success" v-if="review!==1"></i>
        <i class="i-error" v-else></i>
      </div>
      <div class="dialog-desc" v-if="review===-1">
        <div class="font-big">恭喜您，入驻成功！</div>
        <div>商家后台将在审核通过后开启</div>
        <el-button class="btn-sure" @click="handleDialogClose">确定</el-button>
      </div>
      <div class="dialog-desc" v-else-if="review===3">
        <div class="font-big">恭喜你</div>
        <div>你的商铺已审核通过，可登录商家后台</div>
        <el-button class="btn-sure" @click="handleDialogClose">确定</el-button>
      </div>
      <div class="dialog-desc" v-else-if="review ===2 || review ===0">
        <div class="font-big">你的商户正在审核中</div>
        <div>我们将最快为你审核，请您耐心等待</div>
        <el-button class="btn-sure" @click="handleDialogClose">确定</el-button>
      </div>
      <div class="dialog-desc" v-else>
        <div class="font-big">你的商户审核失败</div>
        <div>{{review_content}}</div>
        <el-button class="btn-sure" @click="handleDialogClose">确定</el-button>
      </div>
    </div>
    <div class="overlay" v-if="msgShow"></div>
  </div>
</template>

<script>
import util from '@/utils/util'
import { mapState, mapActions } from 'vuex'
import uploadThumb from './components/cs-upload-thumb'
import csRegionSelect from '@/components/cs-region-select'
import { getShopItem, addShopItem, setShopItem} from '@/api/shop/shop'
export default {
  name: 'apply',
  components: {
    uploadThumb,
    csRegionSelect
  },
  data() {
    const validateMobile= (rule, value, callback) => {
      if (!util.validate.mobile(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    const validateEmail= (rule, value, callback) => {
      if (!util.validate.email(value)) {
        callback(new Error('请输入正确的邮箱地址'))
      } else {
        callback()
      }
    }
    return {
      step: 1,
      type: 1,
      thumbUrl: '',
      expired: '',
      region: [],
      msgShow: false,
      review: -1,
      btnDisabled: false,
      review_content: '',
      reviewStr: '',
      form: {
        shop_id: '',
        shop_type: '',
        contact_name: '',
        contact_telephone: '',
        contact_mobile: '',
        contact_email: '',
        id_card_number: '',
        id_card_face: '',
        id_card_emblem: '',
        id_card_handheld: '',
        company_name: '',
        credit_code: '',
        business_license: '',
        license_start: '',
        license_end: '',
        business_province: '',
        business_city: '',
        business_district: '',
        business_address: '',
        person_name: '',
        name: '',
        short_name: '',
        description: ''
      },
      formRules: {
        contact_name: [{ required: true, message: '请输入入驻人姓名', trigger: 'blur' }],
        contact_mobile: [{ required: true, message: '请输入正确的入驻人手机号码', trigger: 'blur', validator: validateMobile }],
        contact_email: [{ required: true, message: '请输入正确的入驻人邮箱地址', trigger: 'blur', validator: validateEmail }],
        id_card_number: [{ required: true, message: '请输入身份证号码', trigger: 'blur' }],
        id_card_emblem: [{ required: true, message: '请上传身份证人像面', trigger: 'blur' }],
        id_card_handheld: [{ required: true, message: '请上传身份证国徽面', trigger: 'blur' }],
        credit_code: [{ required: true, message: '请上传持证半身照', trigger: 'blur' }],
        business_license: [{ required: true, message: '请上传营业执照', trigger: 'blur' }],
        company_name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        license_start: [{ required: true, message: '请选择营业执照有效期', trigger: 'blur' }],
        license_end: [{ required: true, message: '请选择营业执照有效期止', trigger: 'blur' }],
        business_province: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        business_address: [{ required: true, message: '请选择区域', trigger: 'blur' }],
        person_name: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        short_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        description: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
      }
    }
  },
  computed: {
    ...mapState('careyshop/user', [
      'info',
    ]),
  },
  created() {
    this.getShopInfo()
  },
  methods: {
    ...mapActions('careyshop/account', [
      'logout'
    ]),
    getShopInfo() {
      if(this.info.token.shop_id>0){
        getShopItem(this.info.token.shop_id).then(response => {
          if(response.data) {
            this.form.shop_id = response.data.shop_id
            this.type = response.data.shop_type
            this.form.shop_type = response.data.shop_type
            this.form.contact_name = response.data.contact_name
            this.form.contact_telephone = response.data.contact_telephone
            this.form.contact_email = response.data.contact_email
            this.form.contact_mobile = response.data.contact_mobile
            this.form.id_card_number = response.data.id_card_number
            this.form.id_card_face = response.data.id_card_face
            this.form.id_card_emblem = response.data.id_card_emblem
            this.form.id_card_handheld = response.data.id_card_handheld
            this.form.business_license = response.data.business_license
            this.form.company_name = response.data.company_name
            this.form.credit_code = response.data.credit_code
            this.form.license_start = response.data.license_start
            this.form.license_end = response.data.license_end
            this.form.business_address = response.data.business_address
            this.form.person_name = response.data.person_name
            this.form.name = response.data.name
            this.form.short_name = response.data.short_name
            this.form.description = response.data.description
            this.review = response.data.review_status
            this.review_content = response.data.review_content
            this.msgShow = true
            this.step = 2
            if(response.data.license_start && response.data.license_end){
              let start = new Date(response.data.license_start)
              let end = new Date(response.data.license_end)
              this.expired = [start, end]
            }
            if(response.data.business_province && response.data.business_city && response.data.business_district){
              this.region.push(parseInt(response.data.business_province))
              this.region.push(parseInt(response.data.business_city))
              this.region.push(parseInt(response.data.business_district))
            }
            this.reviewStr = this.getReviewStatus(response.data.review_status)
          }
        })
      }
    },
    handleApply(type) {
      this.step = 2
      this.type = type
      this.form.shop_type = type
    },
    handlePrevious() {
      this.step = 1
      this.type = 0
    },
    cropFaceSuccess(data){
      if(data && data[0] && data[0].url) {
        this.form.id_card_face = data[0].url.indexOf("http")!==-1 ? data[0].url : "http://" + data[0].url
      }
    },
    cropEmblemSuccess(data){
      if(data && data[0] && data[0].url) {
        this.form.id_card_emblem = data[0].url.indexOf("http")!==-1 ? data[0].url : "http://" + data[0].url
      }
    },
    cropHandheldSuccess(data){
      if(data && data[0] && data[0].url) {
        this.form.id_card_handheld = data[0].url.indexOf("http")!==-1 ? data[0].url : "http://" + data[0].url
      }
    },
    cropLicenseSuccess(data) {
      if(data && data[0] && data[0].url) {
        this.form.business_license = data[0].url.indexOf("http")!==-1 ? data[0].url : "http://" + data[0].url
      }
    },
    handleDialogClose() {
      if(this.review === 3) {
        this.$router.push("/")
      } else if(this.review === -1){
        this.review = 2
      }
      this.msgShow = false
    },
    handleDataChange() {
      console.log(this.expired)
      this.form.license_start = this.expired[0]
      this.form.license_end = this.expired[1]
    },
    handleSubmit() {
      this.btnDisabled = true
      let validateArr = []
      if (this.type === 1) {
        validateArr = [
          'contact_name',
          'contact_email',
          'contact_mobile',
          'id_card_number',
          'id_card_face',
          'id_card_emblem',
          'id_card_handheld',
          'name',
          'short_name',
          'description'
        ]
      } else if (this.type === 2) {
        validateArr = [
          'business_license',
          'credit_code',
          'company_name',
          'business_address',
          'person_name',
          'id_card_number',
          'id_card_face',
          'id_card_emblem',
          'id_card_handheld',
          'contact_name',
          'contact_email',
          'contact_mobile',
          'name',
          'short_name',
          'description'
        ]
        if(this.region.length>0){
          this.form.business_province = this.region[0]
          this.form.business_city = this.region[1]
          this.form.business_district = this. region[2]
        }
      }
      let flag = 0
      this.$refs.form.validateField(validateArr,  error =>{
        if (error) {
          flag++
        } 
      })
      if(flag === 0) {
        const self = this
        if(this.form.shop_id) {
          setShopItem(this.form).then(response => {
            if(response.data) {
              self.review = -1
              self.msgShow = true
              self.btnDisabled = false
              self.reviewStr = '等待审核'
            }
          })
        } else {
          addShopItem(this.form).then(response => {
            if(response.data) {
              self.review = -1
              self.msgShow = true
              self.btnDisabled = false
              self.reviewStr = '等待审核'
            }
          })
        }
        
      }
      this.btnDisabled = false
    },
     /**
     * @description 登出
     */
     logOff() {
      this.logout({
        vm: this,
        confirm: true
      })
    },
    // 获取商家审核状态
    getReviewStatus(reviewStatus) {
      let result = ''
      //0=未处理 1=待补充信息(驳回) 2=审核中 3=已审核 4=已拒绝
      switch (reviewStatus) {
        // 待处理
        case 0:
          result = '未处理'
          break
        // 配货中
        case 1:
          result = '不通过'
          break
        // 已发货
        case 2:
          result = '审核中'
          break
        // 已完成
        case 3:
          result = '审核通过'
          break
        case 4:
          result = '已拒绝'
          break
      }

      return result
    },
  }
}
</script>

<style lang="scss">
  .apply-container{
    .p-t-20 {
      padding-top: 20px;
    }
    margin:0 auto;
    .apply-header {
      display: flex;
      background-color: #2C3643;
      justify-content: space-between;
      align-items: center;
      padding: 15px  50px;
      &__logo {
        width: 64px;
        height: 64px;
      }
      &__user {
        color: #fff;
        margin-right: 50px;
        .user-info {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #fff;
        }
      }
    }

    .apply-content {
      overflow-x: scroll;
      height: 1080px;
      &__cards {
        margin: 120px auto 0;
        display: flex;
        justify-content:space-between;
        align-items:center;
        width: 50%;
        &__item {
          border-radius: 10px;
          width: 500px;
          height: 500px;
          text-align: center;
          .title {
            margin-top: 32px;
            font-size: 25px;
            color: #333;
            font-weight: bold;
          }
          .desc {
            margin: 24px 0 16px;
            font-size: 20px;
            color: #333;
          }
          .btn-apply{
            margin-top: 32px;
            background-color: #ff5454;
            color: #fff;
            font-size: 16px;
            width: 50%;
            padding: 16px 0;
          }
        }
      }
      .apply-info {
        .form {
          margin-top: 15px;
          margin-bottom: 100px;
          border: 1px solid #f1eeee;
          &-title {
            font-size:  20px;
            padding: 16px 16px 16px 32px;
            border-bottom: 1px solid #f1eeee;
          }
          &-panel {
            padding: 30px 0;
            width: 60%;
            margin: 0 auto;
          }
          .action {
            text-align: center;
            padding-bottom: 20px;
            .btn-step {
              margin-top: 30px;
              width: 15%;
            }
          }
          
        }
      }
    }
    
    .dialog {
      position: fixed;
      top: 50%;
      left: 50%;
      max-height: 100%;
      overflow-y: auto;
      transition: .3s ease-out;
      -webkit-overflow-scrolling: touch;
      -webkit-transform: translate3d(-50%,-50%,0);
      transform: translate3d(-50%,-50%,0);
      border-radius: .5em;
      padding: .5em 0 1em;
      width: 85%;
      z-index: 1000;
      color: #333333;
      text-align: center;
      
      &-logo{
        margin: 0 auto 0;
        width:128px;
        height: 128px;
        background-color:#FFF;
        border-radius: 50%;
        .i-success{
          margin-top: 12px;
          width:80%;
          height:80%;
          background-image: url("~@/assets/image/i-success.png");
          background-size: 100% 100%;
          display:inline-block;
        }
        .i-error{
          margin-top: 12px;
          width:80%;
          height:80%;
          background-image: url("~@/assets/image/i-error.png");
          background-size: 100% 100%;
          display:inline-block;
        }
      }
      &-desc {
        margin: -55px auto 0;
        background-color: #ffffff;
        width: 50%;
        height: 250px;
        padding: 55px 0;
        font-size: 25px;
        .font-big {
          margin: 16px;
          font-size: 34px;
          color: #000;
        }
        .btn-sure {
          width: 20%;
          margin-top: 60px;
          font-size: 20px;
          color: #fff;
          background-color: #ff5454;
        }
      }
     
    }
    .overlay{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.3);
    }
    
  }
</style>
